<div class="alain-ms__product" [ngClass]="{ 'alain-ms__product-col-1': !hideNav }">
  <div class="ms-page-nav__body">
    <div class="ms-page-nav__stage">
      <div class="ms-page-nav__scene ms-page-nav__scene-main">
        <div class="ms-page-nav__title ms-page-nav__back" (click)="back()" [title]="'返回产品资料'">
          <i nz-icon nzType="left"></i> 返回产品资料
        </div>
        <div class="ms-page-nav__list scrollbar">
          <ng-template #treeTpl let-ls let-level="level">
            <li *ngFor="let i of ls">
              <ng-container>
                <div class="ms-page-nav__item" (click)="selected(i.link)"
                  [ngClass]="{'ms-page-nav__item-active': i.link === currentTpl}">
                  <span class="ms-page-nav__item-icon"></span>
                  <span class="ms-page-nav__item-tit">{{ i.text }}</span>
                </div>
              </ng-container>
            </li>
          </ng-template>
          <ul class="list-unstyled">
            <ng-container *ngTemplateOutlet="treeTpl; context: { $implicit: navList, level: 1 }"></ng-container>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="ms-page-nav__control" (click)="toggle()">
    <div class="ms-page-nav__control-wrap">
      <div class="ms-page-nav__control-bg"></div>
      <div class="ms-page-nav__control-btn">
        <i nz-icon nzType="menu-fold"></i>
      </div>
    </div>
  </div>

  <div class="alain-ms__product-body scrollbar">
    <ng-container *ngIf="currentTpl === 'viewTpl'">
      <ng-container *ngTemplateOutlet="viewTpl"></ng-container>
    </ng-container>
    <ng-container *ngIf="currentTpl === 'saleTpl'">
      <ng-container *ngTemplateOutlet="saleTpl"></ng-container>
    </ng-container>
    <ng-container *ngIf="currentTpl === 'repairTpl'">
      <ng-container *ngTemplateOutlet="repairTpl"></ng-container>
    </ng-container>
    <ng-container *ngIf="currentTpl === 'testTpl'">
      <ng-container *ngTemplateOutlet="testTpl"></ng-container>
    </ng-container>
  </div>
</div>

<ng-template #testTpl>
  <product-lens-test></product-lens-test>
</ng-template>


<ng-template #repairTpl>
  <app-product-repair *ngIf="product" [codeName]="product.codeName"></app-product-repair>
</ng-template>

<ng-template #saleTpl>
  <product-saledata *ngIf="product" [codeName]="product.codeName"></product-saledata>
</ng-template>

<ng-template #viewTpl>
  <nz-spin [nzSpinning]="loading">
    <div>
      <div>
        <div class="wrapper">
          <!-- 图片、摘要 START -->
          <product-view-summary [product]="product" [extra]="extra" [price]="price"></product-view-summary>
          <!-- 图片、摘要 END -->

          <div class="card-container" style="margin-top: 20px;">

            <nz-tabset nzShowPagination="false" (nzSelectChange)="changeTab($event)">
              <nz-tab *ngFor="let tab of tabs" [nzTitle]="titleTemplate">
                <ng-template #titleTemplate> <i [class]="tab.icon"
                    [ngStyle]="{'font-size': isMobile ? '24px' : '16px'}"></i> <span *ngIf="!isMobile">
                    {{ tab.name }}</span>
                </ng-template>
              </nz-tab>
            </nz-tabset>


            <!-- 基本资料 START -->
            <div *ngIf="current === 0">
              <product-basicinfo [product]="product" [extra]="extra" [price]="price"></product-basicinfo>
            </div>
            <!-- 基本资料 END -->

            <!-- 库存 START -->
            <div *ngIf="current === 1">
              <product-stock [sap]="product.sap"></product-stock>
            </div>
            <!-- 库存 END -->

            <!-- 价格 START -->
            <div *ngIf="current === 2">
              <product-price [price]="price"></product-price>
            </div>
            <!-- 价格 END -->

          </div>

        </div>
      </div>
      <!-- <div #divinterest style="position: absolute; top: 0px; right: 0px;background: #fff;"
      class="hidden-xs hidden-sm hidden-md interest interest-active">
      <nz-affix nzOffsetTop="70">
        <product-interest></product-interest>
      </nz-affix>


    </div> -->
    </div>
  </nz-spin>
</ng-template>

<float-btns *ngIf="prodinfo_export_btn" class="hidden-xs hidden-sm hidden-md" [title]="'你需要做什么？'" [btns]="btns"
  (itemClick)="downloadFile($event)">
</float-btns>
